<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Facsimile Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--Google Fonts-->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
	<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
	</script>
<!-- //end-smoth-scrolling -->
<!--light-box-files -->
		<script src="js/jquery.chocolat.js"></script>
		<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">
		<!--light-box-files -->
		<script type="text/javascript" charset="utf-8">
		$(function() {
			$('.gallery-grid a').Chocolat();
		});
		</script>
</head>
<body>
<!--banner start here-->
<div class="banner">
  <div class="header">
	<div class="container">
		 <div class="header-main">
			<div class="logo"><a href="index.html"><img src="images/cr-logo.png" alt=""></a></div>
			 <ul class="bann-icons">
		 		<li><a href="#" class="fa"> </a></li>
		 		<li><a href="#" class="tw"> </a></li>
		 		<li><a href="#" class="g"> </a></li>
		 	</ul>
		    <div class="top-nav">
			 	    <span class="menu"> <img src="images/icon.png" alt=""/></span>
			 	<nav class="cl-effect-1">
				 	<ul class="res">
				 		<li><a class="scroll"href="#home">Home</a></li>
				 		<li><a class="scroll"href="#about">About</a></li>
				 		<li><a class="scroll"href="#services">Services</a></li>
				 		<li><a class="scroll"href="#gallery">Gallery</a></li>
				 		<li><a class="scroll"href="#events">Events</a></li>
				 		<li><a class="scroll"href="#contact">Contact</a></li>
				 	</ul>
			   </nav>
			 	<!-- script-for-menu -->
						 <script>
						   $( "span.menu" ).click(function() {
							 $( "ul.res" ).slideToggle( 300, function() {
							 // Animation complete.
							  });
							 });
						</script>
			 </div>
		   <div class="clearfix"> </div>
		</div>
    </div>
  </div>
</div>
<!--banner end here-->

<!--features start here-->
<div class="features">
	<div class="container">
		<div class="features-main">
			  <div class="col-md-6 fea-left">
			  	<a href="#" rel="title" class="mask">
					<img src="images/a1.jpg" alt="" class="img-responsive zoom-img">
				</a>
			  </div>
			  <div class="col-md-6 fea-right">
			  	<div class="fea-top-img">
				  	 <a href="#" rel="title" class="mask">
						<img src="images/a3.jpg" alt="" class="img-responsive zoom-img">
					</a>
			  	</div>
			  	<div class="fea-bot-img">
			  	  <a href="#" rel="title" class="mask">
						<img src="images/a4.jpg" alt="" class="img-responsive zoom-img">
				  </a>
			  	</div>
			  </div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--features end here-->
<div class="copyrights">Collect from <a href="http://www.cssmoban.com/"  title="网站模板">网站模板</a></div>
<!--about start here-->
<div class="about" id="about">
	<div class="container">
		<div class="about-main">
			<h4>Beciegast vitaesaert viasead</h4>
			<h5>sed numquam eius modi tempora incidunt dolore magnam aliquam</h5>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi com nsequatur? Dequis autem vel eum iure reprehenderit ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eumeas fugiat, </p>
		</div>
	</div>
</div>
<!--about end here-->
<!--testmony start here-->
<div class="testimo">
	<div class="container">
		<div class="testimon-main">
			<h3>Testimonials</h3>
			<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque impedit facere possimus repellendus.</p>
		</div>
	</div>
</div>
<!--testmony end here-->
<!--services start here-->
<div class="services" id="services">
	<div class="container">
		<div class="services-main">
			<div class="service-top">
				<h3>Services</h3>
			</div>
				<div class="col-md-6 services-grid">
					<div class="col-md-5 serv-img">
						<a href="#"><img src="images/s1.jpg" alt="" class="img-responsive"></a>
					</div>
					<div class="col-md-7 serv-text">
						<h4><a href="#">Et iusto odio dignissimos ducimus</a></h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
					</div>
				  <div class="clearfix"> </div>
				</div>
				<div class="col-md-6 services-grid">
					<div class="col-md-5 serv-img">
						<a href="#"><img src="images/s2.jpg" alt="" class="img-responsive"></a>
					</div>
					<div class="col-md-7 serv-text">
						<h4><a href="#">Et iusto odio dignissimos ducimus</a></h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
					</div>
				</div>
				<div class="col-md-6 services-grid">
					<div class="col-md-5 serv-img">
						<a href="#"><img src="images/s3.jpg" alt="" class="img-responsive"></a>
					</div>
					<div class="col-md-7 serv-text">
						<h4><a href="#">Et iusto odio dignissimos ducimus</a></h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
					</div>
				  <div class="clearfix"> </div>
				</div>
				<div class="col-md-6 services-grid">
					<div class="col-md-5 serv-img">
						<a href="#"><img src="images/s4.jpg" alt="" class="img-responsive"></a>
					</div>
					<div class="col-md-7 serv-text">
						<h4><a href="#">Et iusto odio dignissimos ducimus</a></h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
					</div>
				  <div class="clearfix"> </div>
				</div>
			  <div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--services end here-->
<!--team start here-->
<div class="team-mem">
	<div class="container">
		<div class="team-main">
			<div class="team-top">
				<h3>Team</h3>
			</div>
			<div class="team-bott">
			<div class="col-md-3 team-grid">
				<img src="images/t1.jpg" alt="" class="img-responsive">
				<div class="tem-detail">
					<h4>Finibus Bonorum</h4>
					<p>There are many variations of passages of Lorem Ipsum word</p>
				</div>
			</div>
			<div class="col-md-3 team-grid">
				<img src="images/t2.jpg" alt="" class="img-responsive">
				<div class="tem-detail">
					<h4>Malorum John</h4>
					<p>There are many variations of passages of Lorem Ipsum word</p>
				</div>
			</div>
			<div class="col-md-3 team-grid">
				<img src="images/t3.jpg" alt="" class="img-responsive">
				<div class="tem-detail">
					<h4>Bonorum Finibus</h4>
					<p>There are many variations of passages of Lorem Ipsum word</p>
				</div>
			</div>
			<div class="col-md-3 team-grid">
				<img src="images/t4.jpg" alt="" class="img-responsive">
				<div class="tem-detail">
					<h4>Finibus Malorum</h4>
					<p>There are many variations of passages of Lorem Ipsum word</p>
				</div>
			</div>
		  <div class="clearfix"> </div>
		</div>
	 </div>
  </div>
</div>
<!--team end here-->
<!--wedo start here-->
<div class="wedo">
	<div class="container">
		<div class="wedo-main">
			<div class="wedo-top">
			     <h3>What We Do</h3>
			 </div>
			 <div class="wedo-bottom">
				 <div class="col-md-3 wedo-grid">
				 	 <span class="glyphicon glyphicon-asterisk" aria-hidden="true"> </span>
				 	 <h4>Lorem ipsum</h4>
				 	 <p>dolore magnam aliquam quaerat</p>
				 </div>
				 <div class="col-md-3 wedo-grid">
				 	<span class="glyphicon glyphicon-sunglasses" aria-hidden="true"> </span>
				 	<h4>Neque porrot</h4>
				 	<p>dolore magnam aliquam quaerat</p>
				 </div>
				 <div class="col-md-3 wedo-grid">
				 	<span class="glyphicon glyphicon-star-empty" aria-hidden="true"> </span>
				 	<h4>Tempor autem</h4>
				 	<p>dolore magnam aliquam quaerat</p>
				 </div>
				 <div class="col-md-3 wedo-grid">
				 	<span class="glyphicon glyphicon-headphones" aria-hidden="true"> </span>
				 	<h4>Nequ quisqum</h4>
				 	<p>dolore magnam aliquam quaerat</p>
				 </div>
				<div class="clearfix"> </div>
			 </div>
		</div>
	</div>
</div>
<!--wedo end here-->
<!--gallery start here-->
<div class="gallery" id="gallery">
	<div class="container">
	  <div class="gallery-main">
	  	<div class="gallery-top">
	  		<h3>Gallery</h3>
	  	</div>
		<div class="gallery-bott">
			<div class="col-md-4 col1 gallery-grid">
				<a href="images/g1.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">

						<figure class="effect-bubba">
							<img class="img-responsive" src="images/g1.jpg" alt="">
							<figcaption>
						    <h4 class="gal"> Nemo voluptatem</h4>
								<p class="gal1">In sit amet sapien eros Integer dolore magna aliqua</p>	
							</figcaption>			
					</figure>
					</a>
					</div>
					<div class="col-md-4 col1 gallery-grid">
						<a href="images/g2.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
						<figure class="effect-bubba">
							<img class="img-responsive" src="images/g2.jpg" alt="">
							<figcaption>
						    <h4 class="gal">Nemo voluptatem</h4>
								<p class="gal1">In sit amet sapien eros Integer dolore magna aliqua</p>	
							</figcaption>			
						</figure>
						</a>
					</div>
					<div class="col-md-4 col1 gallery-grid">
						<a href="images/g3.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
						<figure class="effect-bubba">
							<img class="img-responsive" src="images/g3.jpg" alt="">
							<figcaption>
						    <h4 class="gal">Nemo voluptatem</h4>
								<p class="gal1">In sit amet sapien eros Integer dolore magna aliqua</p>	
							</figcaption>			
						</figure>
						</a>
					</div>
			     <div class="col-md-4 col1 gallery-grid">
				  <a href="images/g4.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
						<figure class="effect-bubba">
							<img class="img-responsive" src="images/g4.jpg" alt="">
							<figcaption>
						    <h4 class="gal">Nemo voluptatem</h4>
								<p class="gal1">In sit amet sapien eros Integer dolore magna aliqua</p>	
							</figcaption>			
					  </figure>
					</a>
					</div>
					<div class="col-md-4 col1 gallery-grid">
						<a href="images/g5.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
						<figure class="effect-bubba">
							<img class="img-responsive" src="images/g5.jpg" alt="">
							<figcaption>
						    <h4 class="gal">Nemo voluptatem</h4>
								<p class="gal1">In sit amet sapien eros Integer dolore magna aliqua</p>	
							</figcaption>			
						</figure>
						</a>
					</div>
					<div class="col-md-4 col1 gallery-grid">
						<a href="images/g6.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
						<figure class="effect-bubba">
							<img class="img-responsive" src="images/g6.jpg" alt="">
							<figcaption>
						    <h4 class="gal">Nemo voluptatem</h4>
								<p class="gal1">In sit amet sapien eros Integer dolore magna aliqua</p>	
							</figcaption>			
						</figure>
						</a>
					</div>
			     <div class="clearfix"> </div>
			</div>
		</div>
	</div>
</div>
<!--gallery end here-->
<!--events start here-->
<div class="event" id="events">
	<div class="container">
		<div class="events-main">
			<div class="events-top">
				<h3>Our Events</h3>
			</div>
			<div class="event-bottom">
				<div class="col-md-4 event-grid">
					<span class="date"><h3>10</h3></span>
					<h4>June</h4>
					<h5>Lorem Ipsum is simply</h5>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard unchanged</p>
				</div>
				<div class="col-md-4 event-grid">
					<span class="date"><h3>18</h3></span>
					<h4>July</h4>
					<h5>Lorem Ipsum is simply</h5>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard unchanged</p>
				</div>
				<div class="col-md-4 event-grid">
					<span class="date"><h3>30</h3></span>
					<h4>September</h4>
					<h5>Lorem Ipsum is simply</h5>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard unchanged</p>
				</div>
			  <div class="clearfix"> </div>
			</div>
		</div>
	</div>
</div>
<!--events end here-->
<!--contact start here-->
<div class="contact" id="contact">
   <div class="container">
	   <div class="contact-main">
	   	    <div class="contact-top">
	   	    	<h3>Contact Us</h3>
	   	    </div>
	   	    <div class="contact-bottom">
		   	   <div class="col-md-6 contact-left">
		   	       <h4>Get Touch</h4>
		   	       <h5>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus</h5>
		   	       <p>Nor again is there anyone</p>
		   	       <p>59658  officiis debitis</p>
		   	       <p>Cicero, written in BC</p>
		   	       <p>Tel ph :+12 852 6985 542</p>
		   	   </div>
		   	   <div class="col-md-6 contact-right">
		   	     <form>
		   	    	<input type="text" value="Name" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Name';}">	
		   	    	<input type="text" value="Email" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Email';}">
		   	    	<input type="text" value="Phone" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Phone';}">	
		   	    	<textarea onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Message';}">Message</textarea>
		   	    	<input type="submit" value="Send">
		   	     </form>
		   	   </div>
	   	    <div class"clearfix"> </div>
	   	  </div>
       </div>
   </div>
</div>
<!--contact end here-->
<!--footer start here-->
<div class="footer">
	<div class="container">
		<div class="footer-main">
				<div class="col-md-4 ftr-gd">
					<h3>Follow Us</h3>
					<ul>
						<li><a href="#" class="fa"> </a></li>
						<li><a href="#" class="tw"> </a></li>
						<li><a href="#" class="g"> </a></li>
					</ul>
				</div>
				<div class="col-md-4 ftr-gd">
					<h3>Newsletter</h3>
					<input  type="text" value="Enter Your email" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Enter Your email';}">
					<input type="submit" value="Subscribe">
				</div>
				<div class="col-md-4 ftr-gd">
					<h3>Address</h3>
					<p>59658 officiis debitis</p>
					<p>Cicero, written in BC</p>
					<p>Ph :+1586 8557 455</p>
				</div>
			<div class="clearfix"> </div>
		</div>
		<div class="copyright">
			   <p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
		</div>
		<script type="text/javascript">
										$(document).ready(function() {
											/*
											var defaults = {
									  			containerID: 'toTop', // fading element id
												containerHoverID: 'toTopHover', // fading element hover id
												scrollSpeed: 1200,
												easingType: 'linear' 
									 		};
											*/
											
											$().UItoTop({ easingType: 'easeOutQuart' });
											
										});
									</script>
						<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>

	</div>
</div>
<!--footer end here-->
</body>
</html>